<template>
  <!-- 只展示store.getters -->
  <div class="show-table-div">
    <el-table :data="showOrderList" style="width: 100%">
      <el-table-column label="订单信息" prop="id">
        <template slot-scope="scope">
          <div class="book-img-des-container">
            <div class="book-img">
              <el-image
                style="width: 100%; height: 100%"
                :src="scope.row.book.bookImgs[0].imgName"
                fit="contain"
              />
            </div>
            <div class="book-des">
              <div class="book-name">
                <!-- scope.row.book.bookName -->
                <span>{{ scope.row.book.bookName }}</span>
              </div>
              <div class="book-author">
                <span>{{ scope.row.book.author }}</span>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column label="商品名称" prop="name" /> -->
      <el-table-column label="描述">
        <template slot-scope="scope">
          <p>单价：{{ scope.row.price }}</p>
          <p>购买数量：{{ scope.row.num }}</p>
          <p>总金额：{{ scope.row.totalPrice }}</p>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <!-- <p>单价：{{ scope.row.price }}</p>
          <p>购买数量：{{ scope.row.num }}</p>
          <p>总金额：{{ scope.row.price * scope.row.num }}</p>-->
          <p v-if="scope.row.status === 0">未支付</p>
          <p v-else-if="scope.row.status === 1 || scope.row.status === 2">待收货</p>
          <p v-else-if="scope.row.status === 3 || scope.row.status === 5">已取消</p>
          <p v-else-if="scope.row.status === 4">已完成</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleOrderDetail(scope.$index, scope.row)"
          >详情</el-button>
          <!-- <el-button
            v-if="scope.row.status === 0"
            size="mini"
            type="danger"
            @click="handleOrderCancel(scope.$index, scope.row)"
          >取消</el-button>
          -->
          <!-- <el-button
            v-if="scope.row.status === 3 || scope.row.status === 4 || scope.row.status === 5"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // orderList: ''
    }
  },
  computed: {
    showOrderList() {
      return this.$store.getters.showOrderList
    },
    userDetail() {
      return this.$store.getters.userDetail
    }
  },
  created() {
    // this.genOrderList()
  },
  methods: {
    handleOrderDetail(index, obj) {
      this.$router.push(`/orderDetail/${obj.id}`)
    }

    // handleOrderCancel(index, obj) {
    //   this.$confirm('是否取消该订单?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning',
    //     center: true
    //   }).then(() => {
    //     this.$notify({
    //       title: '成功',
    //       message: '取消订单成功',
    //       type: 'success'
    //     })
    //   })
    // }
  }

}
</script>
<style lang="scss" scoped>
.show-table-div {
  height: 100%;
}
.book-img-des-container {
  display: flex;
  .book-img {
    width: 80px;
    height: 80px;
  }
  .book-des {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
  }
}
</style>
